import React from 'react'

class ReactForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  
            msg: "个人信息",
            name: '张三', 
            sex: '1', 
            city: '', 
            cities: [
                '北京',
                '上海', 
                '深圳'
            ], 
            hobby: [
                {
                    "title": '睡觉', 
                    "checked": true, 
                },
                {
                    "title": '吃饭', 
                    "checked": false, 
                },
                {
                    "title": '敲代码', 
                    "checked": false, 
                }
            ],
            info: ''
        };
    }
    handleSubmit = (e) => {
        e.preventDefault(); 
        console.log(this.state.name, this.state.sex, this.state.city, this.state.hobby, this.state.info)
    }

    handleName = (e) => {
        this.setState({
            name: e.target.value
        })
    }

    handleSex = (e) => {
        this.setState({
            sex: e.target.value
        })
    }

    handleCity = (e) => {
        this.setState({
            city: e.target.value
        })
    }
    handleInfo = (e) => {
        this.setState({
            info: e.target.value
        })
    }

    handleHobby(key) {
        var hobby = this.state.hobby ; 
        hobby[key].checked = !hobby[key].checked;
        this.setState({
            hobby: hobby
        })
    }
    render() {
        return (
            <div> 
                <h2>{this.state.msg}</h2>
                <form onSubmit={this.handleSubmit}>
                    用户名: <input type='text' value={this.state.name} onChange={this.handleName}/>
                    <br/><br/>
                    性别： <input type='radio' value="1" checked={this.state.sex==1} onChange={this.handleSex}/>男
                           <input type='radio' value="2" checked={this.state.sex==2} onChange={this.handleSex}/>女
                    <br/><br/>
                    居住城市： 
                    <select value={this.state.city} onChange={this.handleCity}>
                     {
                         this.state.cities.map((value,key ) => {
                             return <option key={key}>{value}</option> 
                         })
                     }     
                    </select>
                    <br/><br/>  
                    爱好： 
                    {
                        this.state.hobby.map((value,key) => {
                            return (
                                <span key={key}>
                                    <input type="checkbox" checked={value.checked} onChange={this.handleHobby.bind(this, key)}/> {value.title}
                                </span>
                            )
                        })
                    }
                    <br/><br/>
                    备注： <input type="textarea" value={this.state.info} onChange={this.handleInfo}/>
                    <br/><br/>  
                    <input type="submit" defaultValue="提交"/>

                </form>
            </div>
        );
    }
}

export default ReactForm;


